<template>
  <div>
    <!-- <a-card style="width: 100%; height: 100px">
      <a-form :model="queryForm" :label-col="labelCol" :wrapper-col="wrapperCol">
        <div style="display: flex">
          <a-form-item label="应用名称">
            <a-input style="width: 200px" v-model:value="queryFormData.username" />
            <a-button type="primary">选择</a-button>
          </a-form-item>
          <a-form-item label="登录账号" style="margin-left: 50px;">
            <a-input style="width: 200px" v-model:value="queryFormData.username" />
            <a-button type="primary" style="margin-left: 30px; size: small">查询</a-button>
            <a-button style="margin-left: 30px; size: small">重置</a-button>
          </a-form-item>
        </div>
      </a-form>
    </a-card> -->
    <a-form class="smart-query-form">
      <a-row class="smart-query-form-row">
        <a-form-item label="应用名称" class="smart-query-form-item">
          <a-input style="width: 200px" v-model:value="queryFormData.name" placeholder="请输入策略名称" />
        </a-form-item>
        <a-form-item label="登录账号" class="smart-query-form-item">
          <a-input style="width: 200px" v-model:value="queryFormData.name" placeholder="请输入策略名称" />
        </a-form-item>

        <a-form-item class="smart-query-form-item smart-margin-left10">
          <a-button-group>
            <a-button type="primary" @click="onSearch">
              <template #icon>
                <SearchOutlined />
              </template>
              查询
            </a-button>
            <a-button @click="resetQuery">
              <template #icon>
                <ReloadOutlined />
              </template>
              重置
            </a-button>

          </a-button-group>
        </a-form-item>
      </a-row>
    </a-form>
    <a-card>
      <a-row class="smart-table-btn-block">
        <div class="smart-table-operate-block">
          <a-button type="primary" @click="addAccountment">
            新增
          </a-button>
          <a-button type="primary" danger @click="handleDelete(null)">删除</a-button>
        </div>
        <div class="smart-table-setting-block">
          <TableOperator v-model="columns" :tableId="TABLE_ID_CONST.APPLICATIONMANAGEMENT.ID" :refresh="ajaxQuery" />
        </div>
      </a-row>
      <a-table :dataSource="dataSource" :pagination="false" :columns="columns" bordered>
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'status'">
            <a-switch v-model:checked="record.status" :checkedValue="1" :unCheckedValue="0" :disabled="true">
              <template #checkedChildren><check-outlined /></template>
              <template #unCheckedChildren><close-outlined /></template>
            </a-switch>
          </template>
        </template>
        <template #operation="{ record }">
          <!-- <a-button type="text" style="margin-right: 10px;">编辑</a-button> -->
          <a-button size="small" type="link" style="margin-right: 10px;" @click="addAccountment(record)">编辑</a-button>
          <a-dropdown>
            <template #overlay>
              <a-menu>
                
                <a-menu-item :key="3" v-if="record.status===1">
                  <a-button type="link"  @click="updateStatus(record)">禁用</a-button>
                </a-menu-item>
                <a-menu-item :key="2" v-else>
                  <a-button type="link"  @click="updateStatus(record)">启用</a-button>
                </a-menu-item>
                <a-menu-item :key="1">
                  <a-button type="link" danger @click="handleDelete(record.id)">删除</a-button>
                </a-menu-item>
              </a-menu>
            </template>
            <a-button type="link" size="small">
              更多
              <DownOutlined />
            </a-button>
          </a-dropdown>

        </template>
      </a-table>
      <div class="smart-query-table-page">
            <a-pagination showSizeChanger showQuickJumper show-less-items :pageSizeOptions="PAGE_SIZE_OPTIONS"
                :defaultPageSize="queryForm.pageSize" v-model:current="queryForm.pageNumber"
                v-model:pageSize="queryForm.pageSize" :total="total" @change="ajaxQuery" @showSizeChange="ajaxQuery"
                :show-total="(total) => `共${total}条`" />
        </div>
    </a-card>
  </div>
  <FormModal ref="formModalRef" />
</template>

<script setup>
const queryFormData = {
  username: '',
};
import { ref, reactive, onMounted } from 'vue';
import { accountmentapi } from '/src/api/system/accountment.js';
import { PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
import TableOperator from '/@/components/support/table-operator/index.vue';
import { TABLE_ID_CONST } from '/@/constants/support/table-id-const';
import FormModal from './components/accountment-form.vue'
import { message } from 'ant-design-vue';


const dataSource = ref([]);
// --------------------------- 查询 ---------------------------
const queryFormState = {
  username: '',
  displayName: '',
  employeeNumber: '',
  appId: '',
  appName: '',
  startDate: '',
  endDate: '',
  startDatePicker: '1728440964909',
  endDatePicker: '1731032964910',
  pageSize: 10,
  pageNumber: 1,
  pageSizeOptions: 10,
}
const queryForm = reactive({ ...queryFormState });

const tableLoading = ref(false);
const tableData = ref([]);
const total = ref(0);


// 查询
function onSearch() {
    queryForm.pageNumber = 1;
    ajaxQuery();
}
// 重置查询
function resetQuery() {
    Object.assign(queryForm, queryFormState);
    ajaxQuery();
}
async function ajaxQuery() {
  console.log(queryForm);
  let res = await accountmentapi.getaccountFetch(queryForm);
  dataSource.value = res.data.rows; //查询
  total.value = res.data.total;
}
const columns = [
  {
    title: '登录账号',
    dataIndex: 'username',
    key: 'username',
  },
  {
    title: '姓名',
    dataIndex: 'displayName',
    key: 'displayName',
  },
  {
    title: '应用名称',
    dataIndex: 'appName',
    key: 'appName',
  },
  {
    title: '应用账号',
    dataIndex: 'relatedUsername',
    key: 'relatedUsername',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    width: 180,
    slots: { customRender: 'operation' },
  },
];
// 选择表格行
const selectedRowKeyList = ref([]);

function onSelectChange(selectedRowKeys) {
    selectedRowKeyList.value = selectedRowKeys;
}
// ---------------------------- 添加/修改 ----------------------------
const formModalRef = ref();
function addAccountment(data) {
  formModalRef.value.showDrawer(data);
}
function updateStatus(data){
  accountmentapi.updateStatus({
    id:data.id,
    status:data.status===1?4:1
  }).then(res=>{
    if(res.code===0){
      message.success('操作成功!')
      ajaxQuery();
    }
  })
}
function handleDelete(ids){
  console.log(ids)
  let id = ids?ids:selectedRowKeyList.value.join(',');
  accountmentapi.delete({
    ids:id
  }).then(res=>{
    if(res.code===0){
      message.success("删除成功!")
      ajaxQuery();
    }
  })
}
onMounted(() => {
  ajaxQuery();
});
</script>
